<template>  
    <div class="app-container">
      <el-form 
      :model="queryParams"
      ref="queryForm"
      size="small"
      v-show="showSearch"
      label-width="0px"
      >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="" prop="serialCode">
          <el-input
            v-model="queryParams.serialCode"
            placeholder="预算申请表编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="budgetProjectCode">
          <el-input
            v-model="queryParams.budgetProjectCode"
            placeholder="预算项目编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item>
                <el-select
                filterable
                    v-model="queryParams.category"
                    placeholder="类别（预算大类）"
                    clearable
                    size="small"
                    style="width:100%"
                    @keyup.enter.native="handleQuery"
                    
                >
                 <el-option
                    v-for="(item,index) in CategoryList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </el-form-item>
        </el-col>
             <el-col :span="6">
            <el-form-item label="" prop="budgetProjectName">
              <el-input
                v-model="queryParams.budgetProjectName"
                placeholder="预算项目名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
        </el-col>
          <el-col :span="6">
            <el-form-item label="" prop="budgetSource">
              <el-input v-model="queryParams.budgetSource"
              size="small" 
              placeholder="预算来源" 
              clearable
              @keyup.enter.native="handleQuery">
              </el-input>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="budgetTotalAmount">
                <el-input 
                    v-model="queryParams.budgetTotalAmount"
                    placeholder="预算总金额"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="budgetBalance">
                <el-input 
                    v-model="queryParams.budgetBalance"
                    placeholder="预算余额"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item>
                <el-select
                    v-model="queryParams.executingDepartment"
                    placeholder="执行部门"
                    clearable
                    size="small"
                    style="width:100%"
                    @keyup.enter.native="handleQuery"
                >
                 <el-option
                    v-for="(item,index) in departmentList"
                    :key="index"
                    :label="item"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="executionPeriod">
                <el-input
                    v-model="queryParams.executionPeriod"
                    placeholder="执行期数"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="" prop="executionDeadline">
                <el-input
                    v-model="queryParams.executionDeadline"
                    placeholder="执行期限"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                    />
            </el-form-item>
        </el-col>
        </el-row>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
      
    </el-form>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    
    <el-table v-loading="loading" :data="leavetodoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed/>
      <el-table-column type="index" fixed width="55" label="序号" align="center" />
      <el-table-column label="预算执行申请表编号" align="center" fixed prop="serialCode" width="200" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-link type="primary" @click="handleProcess(scope.row)">{{scope.row.serialCode}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="预算项目编号" align="center" fixed prop="budgetProjectCode"  width="150" :show-overflow-tooltip="true"  />
      <el-table-column label="类别（预算大类）" align="center"  prop="category" width="230" :show-overflow-tooltip="true" />
      <el-table-column label="分类（预算子类）" align="center" prop="classify"  width="230" :show-overflow-tooltip="true" />
      <el-table-column label="预算总金额" align="center" prop="budgetTotalAmount" width="100" :show-overflow-tooltip="true"  />
      <el-table-column label="预算来源" align="center" prop="budgetSource" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="预算余额" align="center" prop="budgetBalance" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="合同金额" align="center" prop="contractAmount" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="合同执行金额" align="center" prop="contractExecutionAmount" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="合同执行余额" align="center" prop="contractExecutionBalance" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="执行项目名称" align="center" prop="executionProjectName" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="执行部门" align="center" prop="executingDepartment" width="100" :show-overflow-tooltip="true"  />
      <el-table-column label="执行期数" align="center" prop="executionPeriod" width="100" :show-overflow-tooltip="true"  />
      <el-table-column label="执行期限" align="center" prop="executionDeadline" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="历史执行金额" align="center" prop="historicalExecutionAmount" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="本次执行金额" align="center" prop="currentExecutionAmount" width="110" :show-overflow-tooltip="true" />
      <el-table-column label="执行状态" align="center" prop="executionStatus" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="执行日期" align="center" prop="executionDate" width="150" :show-overflow-tooltip="true" />
      <el-table-column label="预算项目名称"  align="center" prop="budgetProjectName" width="110" :show-overflow-tooltip="true"  />
      
      <!-- <el-table-column label="额度" sortable align="center" prop="budget" width="180" /> -->
      <el-table-column label="申请状态" align="center" prop="approvalStatus" width="150" :show-overflow-tooltip="true" />
      <el-table-column label="申请日期" sortable align="center" prop="applyForTime" width="150" />
        <el-table-column label="创建日期" sortable align="center" prop="createTime" width="150" />
      <!-- <el-table-column label="备注" align="center" sortable prop="note" width="180" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" fixed="right">
        <template slot-scope="scope">
          <template  v-if="scope.row.status == '0' || scope.row.status =='2'">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleProcess(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
          </template>
          <template v-else>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-coordinate"
              @click="handleProcess(scope.row)"
            >办理</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
</template>

<script>
import { BudgetAdd,BudgetList,BudgetDel,BudgetEdit,budget_department,BudgetIntroduction,BudgetCategory } from "@/api/financial/budgetExecution.js"
import { officeTodoList, deptListAll, mytodoSelectStatus } from "@/api/administeration/askForLeave.js";
import { delProcess } from "@/api/workflow/process"
export default {
    name: 'budgetTodo',
    data() {
      return {
          // 遮罩层
          loading: false,
          // 显示搜索条件
          showSearch: true,
          leavetodoList: [],
          //总条数
          total: 0,
          queryParams: {
            pageNum: 1,
              pageSize:10,
              serialCode: null,
              budgetProjectCode: null,
              budgetProjectName: null,
              category: null,
              budgetSource: null,
              budgetTotalAmount: null,
              budgetBalance: null,
              executingDepartment: null,
              executionPeriod: null,
              executionDeadline: null
            },
            deptOptions: [],
            sourcesList: [],
            departmentList: [],
            CategoryList: [],
            Code:"CODE_YS"
        }
    },
    activated () {
    this.getList()
    // this.getDeptListAll()
    },
    created() {
      this.getList()
      // this.getDeptListAll()
      // this.getSelectStatus()
    },
    methods: {
      // 部门查询
      inItPage() {
        budget_department().then(res => {
          for(let i = 0;i<res.data.length;i++){
            this.departmentList.push(res.data[i].dictLabel)
          }
        })
      },
      // 跳转详情
      handleProcess(row) {
        this.$router.push({
        path: "/workflow/process/financeformdetail/" + row.procInstId,
        query: {
          taskId: row.taskId,
          processed: true
        }
      });
      },
      handleExport() {},
      handleSelectionChange() { },
      /** 搜索按钮操作 */
      handleQuery() {
         this.queryParams.pageNum = 1;
         this.getList()
        },
        // 预算大类
        category() {
          BudgetCategory().then(res => {
            console.log(res,'res');
            this.CategoryList = res.data
          })
        },
        resetQuery() {
          // this.resetFormData("queryForm");
          this.queryParams = {
            pageNum: 1,
              pageSize:10,
              serialCode: null,
              budgetProjectCode: null,
              budgetProjectName: null,
              category: null,
              budgetSource: null,
              budgetTotalAmount: null,
              budgetBalance: null,
              executingDepartment: null,
              executionPeriod: null,
              executionDeadline: null
          }
          this.handleQuery();
      },
        /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.procInstId || this.ids;
      const serialCodes = row.serialCode || this.serialCodes;
      this.$confirm(
        '是否确认删除流程定义编号为"' + serialCodes + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return delProcess(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        });
    },
        /** 查询流程定义列表 */
    getList() {
      this.loading = true;
      // let obj = {}
      // if ( this.dateRange != null && this.dateRange.length>0) {
      //   obj = {
      //     applyForStartDate:this.dateRange[0],
      //    applyForEndDate:this.dateRange[1]
      //   }
      // }
      // let createObj = {}
      // if (this.createTime != null && this.createTime.length>0 ) {
      //   createObj = {
      //     createStartDate:this.createTime[0],
      //    createEndDate:this.createTime[1]
      //   }
      // }
      officeTodoList({ ...this.queryParams,},this.Code).then(
        response => {
          this.leavetodoList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
      this.category()
      this.inItPage()
    },
    }
}
    
</script>

<style lang="less" scoped>

</style>